<template>
  <el-collapse-item name="abnormalHandlingStatus">
    <div class="top" slot="title">
      <PartitionTitle
        title="异常处理（请勾选下一班组继续处理的异常，其余将自动忽略）"
        type="line"
      ></PartitionTitle>
    </div>
    <el-table
      ref="Table"
      :data="list"
      tooltip-effect="dark"
      style="width: 100%"
      height="240px"
      max-height="240px"
      border
      v-loading="loading"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
        :selectable="selectableFn"
      ></el-table-column>
      <el-table-column label="异常名称" prop="abnormalName" min-width="200">
        <template slot-scope="{ row }">
          <el-button type="text" @click.stop="handleShowAbnormalDetail(row)">{{
            row.abnormalName
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        label="异常分类"
        prop="abnormalTypeName"
        min-width="90"
      ></el-table-column>
      <el-table-column label="异常等级" prop="abnormalLevelName" min-width="90">
        <template slot-scope="{ row }">
          <span class="status-1" v-if="row.abnormalLevelCode == 'AbnormalOne'"
            >一级</span
          >
          <span class="status-2" v-if="row.abnormalLevelCode == 'AbnormalTwo'"
            >二级</span
          >
          <span class="status-3" v-if="row.abnormalLevelCode == 'AbnormalThree'"
            >三级</span
          >
        </template>
      </el-table-column>
      <el-table-column
        label="异常描述"
        prop="abnormalDes"
        min-width="200"
      ></el-table-column>
      <el-table-column
        label="生成时间"
        prop="buildDate"
        min-width="140"
      ></el-table-column>
      <el-table-column label="责任人" prop="processedName" min-width="120">
        <template slot-scope="{ row }">
          <el-tooltip popper-class="tooltip-popper" placement="top">
            <div style="max-width: 260px; line-height: 18px" slot="content">
              {{ row.processedName || row.workStationName }}
            </div>
            <div class="tooltip-detail">
              {{ row.processedName || row.workStationName }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 异常详情 -->
    <excepDetail
      :row="excepData.row"
      mode="look"
      :visible.sync="excepData.visible"
    />
  </el-collapse-item>
</template>
<script>
import {
  getAbnormalListByLineCode,
  getAbnormalListByIds,
} from "@/api/shifts/shiftHandover";
import excepDetail from "@/views/exceptionMgmt/components/excepDetail";
import { mapState, mapMutations } from "vuex";
export default {
  components: { excepDetail },
  props: {
    // 表单状态，控制不同情况下 表单呈现的效果，1-接班，2-交班，3-历史查看，4-查看班组
    status: {
      type: String,
      default: "2",
    },
    detailKey: {
      type: String,
      default: "handoverDetail",
    },
  },
  data() {
    return {
      list: [],
      excepData: {
        visible: false,
        row: null,
      },
      loading: false,
    };
  },
  computed: {
    ...mapState({
      handoverDetail: (state) => state.turnOnDuty.handoverDetail,
    }),
    detailsData() {
      return this[this.detailKey];
    },
  },
  methods: {
    ...mapMutations("turnOnDuty", [
      "SET_HANDOVER_REMAINABNORMALIDS",
      "SET_HANDOVER_ALLABNORMALIDS",
    ]),
    getData() {
      if (!this.detailsData) {
        return;
      }
      this.loading = true;
      if (this.status == "2") {
        const { lineCode } = this.detailsData;
        const param = {
          erpProductionLineCode: lineCode,
        };
        getAbnormalListByLineCode(param)
          .then((res) => {
            this.list = res?.data || [];

            const allIds = this.list.map((ele) => ele.id);
            // 保存列表ids
            this.SET_HANDOVER_ALLABNORMALIDS(allIds);
            this.$nextTick(() => {
              // 默认勾选所有
              this.$refs.Table.toggleAllSelection(true);
              // 保存勾选ids
              this.SET_HANDOVER_REMAINABNORMALIDS(allIds);
            });
          })
          .catch((err) => {
            this.list = [];
            this.SET_HANDOVER_ALLABNORMALIDS([]);
            this.SET_HANDOVER_REMAINABNORMALIDS([]);
          })
          .finally(() => {
            this.loading = false;
          });
      } else {
        const { allUndoAbnormalIds } = this.detailsData;
        const param = {
          abnormalIds: allUndoAbnormalIds || [],
        };
        getAbnormalListByIds(param)
          .then((res) => {
            this.list = res?.data || [];

            // 保存列表ids
            const allIds = this.list.map((ele) => ele.id);
            this.SET_HANDOVER_ALLABNORMALIDS(allIds);

            // 设置勾选项（下一班组继续处理的异常项）
            // this.$nextTick(() => {
              if (this.detailsData?.remainAbnormalIds?.length) {
                const selection = this.detailsData.remainAbnormalIds;
                setTimeout(() => {
                  this.list.forEach((row) => {
                    if (selection.includes(row.id)) {
                      console.log("row1");
                      this.$refs.Table.toggleRowSelection(row, true);
                    }
                  });
                }, 0);
              }
            // });
          })
          .catch((err) => {
            this.list = [];
            this.SET_HANDOVER_ALLABNORMALIDS([]);
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    selectableFn() {
      return this.status == "2";
    },
    // 勾选列表
    handleSelectionChange(selection) {
      const selectionIds = selection.map((ele) => ele.id);
      // 保存数据
      this.SET_HANDOVER_REMAINABNORMALIDS(selectionIds);
    },
    handleShowAbnormalDetail(row) {
      this.excepData.row = row;
      this.excepData.visible = true;
    },
  },
  watch: {
    detailsData: {
      handler(newVal) {
        if (newVal) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
};
</script>
<style lang="scss" scoped>
.top {
  margin: 20px 0 10px;
}
.block-title {
  margin-bottom: 0;
}
::v-deep {
  .el-table--medium .el-table__cell {
    padding: 0;
    height: 44px;
  }
}

.status-1 {
  color: #d9001b;
  font-weight: 600;
}

.status-2 {
  color: #f59a23;
  font-weight: 600;
}
.status-3 {
  color: #88c446;
  font-weight: 600;
}
.status-4 {
  color: #666666;
  font-weight: 600;
}
</style>
